<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <div class="setting_body_item">
          <div class="header">法人必须需：提前关注公众号：“公众平台安全助手”，否则法人微信号码收不到人脸验证的验证消息</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form size="small" label-width="100px" ref="itemForm" :model="obj" :rules="Rules">
                <el-form-item label="企业名称" prop="name"><el-input v-model="obj.name" style="width:360px;" type="text" placeholder="请输入内容"></el-input></el-form-item>
               <el-form-item label="代码类型" prop="code_type">
                 <el-select v-model="obj.code_type" placeholder="请选择">
                   <el-option v-for="item in typelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
                <el-form-item label="企业代码" prop="code"><el-input v-model="obj.code" style="width:360px;" type="text" placeholder="企业代码"></el-input></el-form-item>

                <el-form-item label="法人微信" prop="legal_persona_wechat">
                  <el-input placeholder="法人微信" v-model.trim="obj.legal_persona_wechat" style="width:360px"></el-input>
                </el-form-item>
                <el-form-item label="法人姓名" prop="legal_persona_name">
                  <el-input v-model="obj.legal_persona_name" style="width:360px;" type="text" placeholder="法人姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系电话"><el-input v-model="obj.component_phone" style="width:360px;" type="text" placeholder="联系电话"></el-input></el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">提交</el-button></div>
    </div>
  </el-container>
</template>

<script>
import {weixinsave} from '@/api/mall/quick';

export default {
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!/^1[23456789]\d{9}$/.test(value)) {
        callback(new Error('手机号码有误，请重填'));
      } else {
        callback();
      }
    };
    return {
      obj: {
        name: '',
        code: '',
        code_type: '',
        legal_persona_wechat: '',
        legal_persona_name: '',
        component_phone: ''
      },
      typelist: [
        {
          value: '1',
          label: '统一社会信用代码(18位)'
        },
        {
          value: '2',
          label: '组织机构代码(9位xxxxxxxx-x)'
        },
        {
          value: '3',
          label: '营业执照注册号(15位)'
        }
      ],
      Rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入企业名称'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入企业代码'
          }
        ],
        code_type:[
          {
            required: true,
            trigger: 'change',
            message: '请选择代码类型'
          }
        ],
        legal_persona_wechat: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入法人微信'
          }
        ],
        component_phone: [
          {
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }
        ],
        legal_persona_name: [
          {
            required: true,
            trigger: 'change',
            message: '请选择法姓名'
          }
        ]
      }
    };
  },

  mounted() {},
  methods: {
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          let data = this.obj
          weixinsave(data).then(res => {

          });
        }})

    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
